<template>
  <div ref="wrapper" class="wrapper">
    <div>
      <!-- 封装一个插槽 用于可滚动区域 -->
      <slot></slot>
    </div>
  </div>
</template>

<script>
import BScroll from "better-scroll";

export default {
  name: "Scroll",

  // 父组件传递参数
  props: {
    // 是否需要实时监听滚动 >>> 如果不需要的情况下监听会响应程序性能
    probeType: {
      type: Number,
      default: 0,
    },
    // 是否需要进行上拉加载监听
    pullUpLoad: {
      type: Boolean,
      default: false,
    },
  },

  // 组件数据
  data() {
    return {
      scroll: null,
    };
  },

  // 组件已经挂载完成
  mounted() {
    // 1. 创建一个better-scroll的实例对象
    this.scroll = new BScroll(this.$refs.wrapper, {
      // 是否监听滚动事件 probeType
      // 0: 不侦听 1: 明确不侦听 2: 侦听手指滑动, 惯性省略 3: 只要是滚动都侦听
      probeType: this.probeType,
      // 是否监听上拉事件
      pullUpLoad: this.pullUpLoad,
      // 1) 只有像按钮这种button标签的点击事件才能够在click: false的情况下触发点击的监听事件
      // 2) 如果是div那就不行, 因为外部封装有些组件需要点击事件, 所以我们设置为 click: true
      click: true,
    });

    // TODO: 我这边简单测试了下发现传 0/1/2/3 都是3的效果 只能试下用if了
    if (this.probeType == 3) {
      // 2. 监听滚动事件
      this.scroll.on("scroll", (position) => {
        // console.log("[滚动中] >>>", position);
        // 给父组件提交一个自定义事件
        this.$emit("scroll", position);
      });
    } else {
      console.log("[better-scroll] 我不处理你的实时滚动了哦~");
    }

    // 3. 监听上拉事件
    if (this.pullUpLoad) {
      this.scroll.on("pullingUp", () => {
        // console.log("[better-scroll] 上拉加载更多");
        // 提交自定义事件 >>> 告诉父组件我要触发上拉加载了...
        this.$emit("pullingup");
      });
    }

    // 4. 指定位置滚动
    // this.scroll.scrollTo(x, y);

    // 5. 刷新better-scroll 重新计算
    // console.log(this.scroll);
  },

  // 组件方法
  methods: {
    // 内部封装一个指定位置滚动的方法供父组件调用 >>> 牛批！！！
    scrollTo(x, y, time = 300) {
      // time=300 写了个默认值
      // && : 短路运算, 只有前面的表达式值为true的时候才会执行后面的表达式
      this.scroll && this.scroll.scrollTo(x, y, time);
      this.refresh();
    },

    // 完成本次上拉任务 可以进行下一次上拉加载更多任务家你听
    finishPullUp() {
      console.log("[上拉加载任务] >>> 本次上拉加载任务已完成");
      this.scroll && this.scroll.finishPullUp();
    },

    // 让better-scroll重新计算可滚动区域高度
    refresh() {
      // console.log("[计算可滚动区域] >>> 正在帮您重新计算中, 请稍后");
      // console.log("");
      // console.log("");
      this.scroll && this.scroll.refresh();
    },

    // 返回当前better-scroll的y轴滚动高度
    getScrollY() {
      return this.scroll ? this.scroll.y : 0;
    },
  },
};
</script>

<style scoped>
</style>